<template>
  <div ref="container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as PIXI from 'pixi.js'
import * as Matter from 'matter-js'
import { RigidBody } from '@/config/rigidBody.js'
import { ConfigSize } from '@/config/consts.js'

import background_img from '@/assets/background_img.png'
import front_img from '@/assets/front_img.png'
import left_hook_claw from '@/assets/left_hook_claw.png'
import right_hook_claw from '@/assets/right_hook_claw.png'
import suspender_rod from '@/assets/suspender_rod.png'

import { RigidBodyRender } from '@/config/rigidBodyRender.js'
import { PixiApp } from '@/config/pixiApp.js'

// 小球
import ball1 from '@/assets/ball1.png'
import ball2 from '@/assets/ball2.png'

import { config } from '@/config/index'

// const config = ref({})

const container = ref(null)
const bodyWidth = 1920
const bodyHeight = 1080

const left_claw = PIXI.Sprite.from(left_hook_claw)
const right_claw = PIXI.Sprite.from(right_hook_claw)

const CONFIG_SIZE = new ConfigSize()

const claw_container = new PIXI.Container()

let containerX = 100
let containerY = 220

document.onkeydown = (event) => {
  const key = event.key // 获取按下的键名
  switch (key) {
    case '+':
      reduceRotation()
      break
    case '-':
      addRotation()
      break
    case 'ArrowRight':
      rightBtn()
      break
    case 'ArrowLeft':
      LeftBtn()
      break
    case 'ArrowDown':
      downBtn()
      break
    case 'ArrowUp':
      upBtn()
      break
  }
  console.log('keyNum', key)
}
const rightBtn = () => {
  claw_container.position.x = containerX += 10
}

const LeftBtn = () => {
  claw_container.position.x = containerX -= 10
}

const downBtn = () => {
  claw_container.position.y = containerY += 10
}
const upBtn = () => {
  claw_container.position.y = containerY -= 10
}

const addRotation = () => {
  right_claw.rotation += 0.1
  left_claw.rotation -= 0.1
}
const reduceRotation = () => {
  right_claw.rotation -= 0.1
  left_claw.rotation += 0.1
}

// 加载小球
const loadBall = async () => {
  // 加载小球资源
  const ballsSprite = await PIXI.Assets.load([ball1])

  const startXList = [231, 279]

  let body = null

  for (const key in ballsSprite) {
    const ballSprite = new PIXI.Sprite(ballsSprite[key])
    ballSprite.width = startXList[0]
    ballSprite.height = startXList[1]
    ballSprite.zIndex = 3
    ballSprite.x = 100
    ballSprite.y = 500
    PixiApp.stage.addChild(ballSprite)

    // 物理引擎
    body = Matter.Bodies.circle(ballSprite.x, 0, 96.25, {
      restitution: 0.8, // 设置弹力
      mass: 10 // 设置重力
    })
    body.friction = 0.5
    RigidBody.create(ballSprite, body, {
      configSize: CONFIG_SIZE
    })
    run()
  }
}

// 物理引擎run函数

const run = () => {
  RigidBodyRender.getInstance(CONFIG_SIZE).run()
}

const main = () => {
  container.value.appendChild(PixiApp.view)

  // 创建抓娃娃容器
  const sprite_bg = PIXI.Sprite.from(background_img)
  sprite_bg.width = bodyWidth
  sprite_bg.height = bodyHeight
  PixiApp.stage.addChild(sprite_bg)
  const sprite_front = PIXI.Sprite.from(front_img)
  sprite_front.width = bodyWidth
  sprite_front.height = bodyHeight

  // 创建爪子
  left_claw.width = config.clawImg.width
  left_claw.height = config.clawImg.height
  left_claw.anchor.set(1, 0) // 设置锚点为中心
  left_claw.position.x = 70
  left_claw.position.y = -20

  right_claw.width = config.clawImg.width
  right_claw.height = config.clawImg.height
  right_claw.anchor.set(0) // 设置锚点为中心
  right_claw.position.x = 130
  right_claw.position.y = -20

  const suspender_claw = PIXI.Sprite.from(suspender_rod)
  suspender_claw.position.x = 20
  suspender_claw.position.y = -750

  claw_container.addChild(left_claw)
  claw_container.addChild(right_claw)
  claw_container.addChild(suspender_claw)

  claw_container.position.x = containerX
  claw_container.position.y = containerY
  PixiApp.stage.addChild(claw_container)
  PixiApp.stage.addChild(sprite_front)

  // 加载小球
  loadBall()
}
onMounted(() => {
  fetch('config.json')
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok')
      }
      return response.json()
    })
    .then((data) => {
      console.log(data)
    })
  main()
})
</script>

<style></style>
